
import React, { lazy } from 'react'
import { UserOutlined, HomeOutlined, SettingOutlined, LineChartOutlined, TeamOutlined, AppstoreOutlined } from '@ant-design/icons'
import Icon from '@ant-design/icons';
import Loadable from 'react-loadable';
import Loading from './../components/Loading'
// 登录
// import Login from "@/views/login/Login"
// import notFound from "@/views/error/notFound"
// import Home from "@/views/admin"
// import Dashboard from "@/views/admin/dashboard"
// import Product from "@/views/admin/users"
// import List from "@/views/admin/users/List"
// import Recycler from "@/views/admin/users/Recycler"
// import Assembly from "@/views/admin/assembly"
// import From from "@/views/admin/assembly/From"
// import Button from "@/views/admin/assembly/Button"
// import Index from "@/views/admin/assembly/index"
// import Test from "@/views/admin/test"
// import Example from "@/views/admin/example"
const Login = Loadable(
    {
        loader: () => import('@/views/login/Login'),
        loading: Loading,
    })
const notFound = Loadable({
    loader: () => import('@/views/error/notFound'),
    loading: Loading,
})
const Home = Loadable({
    loader: () => import('@/views/admin'),
    loading: Loading,
})
const Dashboard = Loadable({
    loader: () => import('@/views/admin/dashboard'),
    loading: Loading,
})
const Product = Loadable({
    loader: () => import('@/views/admin/users'),
    loading: Loading,
})
const List = Loadable({
    loader: () => import('@/views/admin/users/List'),
    loading: Loading,
})
const Recycler = Loadable({
    loader: () => import('@/views/admin/users/Recycler'),
    loading: Loading,
})
const Assembly = Loadable({
    loader: () => import('@/views/admin/assembly'),
    loading: Loading,
})
const From = Loadable({
    loader: () => import('@/views/admin/assembly/From'),
    loading: Loading,
})
const Button = Loadable({
    loader: () => import('@/views/admin/assembly/Button'),
    loading: Loading,
})
const Index = Loadable({
    loader: () => import('@/views/admin/assembly/index'),
    loading: Loading,
})
const Test = Loadable({
    loader: () => import('@/views/admin/test'),
    loading: Loading,
})
const Example = Loadable({
    loader: () => import('@/views/admin/example'),
    loading: Loading,
})
// svg颜色如果不变 删除svg 里面的fill='***'  然后替换成fill="currentColor"  就可以了
const HeartSvg = () => (
    <svg t="1616049922256" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2140" width="1em" height="1em" fill="currentColor"><path d="M512 360.727273a34.909091 34.909091 0 0 1-34.909091-34.909091v-69.818182a34.909091 34.909091 0 1 1 69.818182 0v69.818182a34.909091 34.909091 0 0 1-34.909091 34.909091z m-222.161455-27.159273l49.361455 49.361455a34.909091 34.909091 0 1 1-49.338182 49.361454l-49.384727-49.361454a34.909091 34.909091 0 1 1 49.361454-49.361455zM232.727273 570.181818a34.909091 34.909091 0 1 1 0 69.818182H162.909091a34.909091 34.909091 0 1 1 0-69.818182h69.818182z m628.363636 0a34.909091 34.909091 0 1 1 0 69.818182h-69.818182a34.909091 34.909091 0 1 1 0-69.818182h69.818182z m-77.568-236.613818a34.909091 34.909091 0 0 1 0 49.361455l-49.361454 49.361454a34.816 34.816 0 0 1-49.361455 0 34.909091 34.909091 0 0 1 0-49.361454l49.361455-49.361455a34.909091 34.909091 0 0 1 49.361454 0zM842.938182 861.090909A417.233455 417.233455 0 0 0 930.909091 605.090909c0-230.981818-187.904-418.909091-418.909091-418.909091-230.981818 0-418.909091 187.927273-418.909091 418.909091 0 92.834909 31.045818 182.644364 87.970909 256h661.876364zM512 116.363636c269.917091 0 488.727273 218.810182 488.727273 488.727273 0 125.346909-47.592727 239.313455-125.207273 325.818182H148.48C70.865455 844.404364 23.249455 730.437818 23.249455 605.090909 23.272727 335.173818 242.106182 116.363636 512 116.363636z m-32.907636 455.819637c18.152727-18.176 97.000727-67.537455 115.2-49.384728 18.152727 18.199273-31.208727 97.024-49.384728 115.2a46.545455 46.545455 0 1 1-65.815272-65.815272z" p-id="2141"></path></svg>
);
const HeartIcon = props => <Icon component={HeartSvg} {...props} />;
// 主要路由
export const mainRoutes = [
    {
        path: '/login',
        component: Login
    },
    {
        path: '/404',
        component: notFound
    }
]

// 菜单路由
export const adminRoutes = [
    {
        path: '/admin',
        component: Home,
        hideClose: true, // 标签页是否隐藏关闭图标
        exact: true,
        isShow: true,
        title: '首页',
        icon: <HomeOutlined />
    },
    {
        path: '/admin/dashboard',
        component: Dashboard,
        exact: true,
        isShow: true,
        title: '仪表盘',
        // icon: <LineChartOutlined />
        icon: <HeartIcon style={{ fontSize: '16px' }} />
    },
    {
        path: '/admin/users', // 路由
        component: Product, // 组件
        exact: true, // 是否严格模式
        isShow: true, // 是否显示
        title: '用户管理', // 左侧菜单栏和面包签名称
        icon: <UserOutlined />, // 图标
        route: true, // 面包签中不能进行点击则加上route
        childrens: [ // 嵌套路由
            {
                path: '/admin/users/recycler',
                component: Recycler,
                exact: true,
                isShow: true,
                title: '回收员列表',
                icon: ""
            },
            {
                path: '/admin/users/list',
                component: List,
                exact: true,
                isShow: true,
                title: '客户列表',
                icon: ""
            }
        ]
    },
    {
        path: '/admin/test',
        component: Test,
        exact: true,
        isShow: true,
        title: '菜单管理',
        icon: <AppstoreOutlined />
    },
    {
        path: '/admin/example',
        component: Example,
        exact: true,
        isShow: true,
        title: '群组管理',
        icon: <TeamOutlined />
    }, {
        path: '/admin/assembly',
        component: Assembly,
        exact: true,
        isShow: true,
        title: '组件',
        icon: <SettingOutlined />,
        route: true,
        childrens: [
            {
                path: '/admin/assembly/from',
                component: From,
                exact: true,
                isShow: true,
                title: '表单',
                icon: ""
            },
            {
                path: '/admin/assembly/button',
                component: Button,
                exact: true,
                isShow: true,
                title: '按钮',
                icon: ""
            },
            {
                path: '/admin/assembly/index',
                component: Index,
                exact: true,
                isShow: true,
                title: '测试',
                icon: ""
            }
        ]
    },
]